<template>
	<view class="train pB200ux">
		<view class="alltab uni-flex uni-row">
			<view class="tabli" @click="choosetab('4')"><text :class="statuon=='4'?'on':''">等他确认</text> </view>
		<!-- 	<view class="tabli" @click="choosetab('1')"><text :class="statuon=='1'?'on':''">等我确认</text> </view> -->
			<view class="tabli" @click="choosetab('2')"><text :class="statuon=='2'?'on':''">邀请不来</text></view>
			<view class="tabli" @click="choosetab('3')"><text :class="statuon=='3'?'on':''">同意邀请</text></view>
		</view>
		
			<view class="times list w100" v-if="statuon!='1'">
				<view class="an-index-grid2 tCenter p5 pL10 pR10 bodybg">
				<!-- 	<view class="tabshow pR5" @click="choosedate('start')">
						<span class='borderr8 p2 pL5 pR5 borderall'>{{startdate?startdate:'预约开始'}} <uni-icons class="pL5" type="arrowdown" size="10"></uni-icons></span>
					</view>
					- -->
					<view class="tabshow pL5">			
						<view class="" @click="choosedate('end')">
							<span class=' borderr8 p2 pL5 pR5 borderall'>{{enddate?enddate:'请选择日期'}} <uni-icons class="pL5" type="arrowdown" size="10"></uni-icons></span>
						</view>				
					</view>
					<!-- <view class="pL5" @click="chooseall()">
						<span class=' borderr8 p2 pL5 pR5 borderall'>全部</span>
					</view> -->
				</view>
			</view>
		
		
		<nodata v-if="invitelist.length==0"></nodata>
		<view class="topics p10 borderb1" v-for="(item,index) in invitelist">
	<view class="an-user-image">
		<view class="myheaadurl"><image mode="aspectFill" :src="item.vister_personimg | personimg" @error="imageError"></view>
		<!-- <view class="inviteheadurl"><image mode="aspectFit" :src="item.security_headimgurl" @error="imageError"></view> -->
	
		</image>
	</view>
			<!-- <view class="topics-text">{{item.question}}</view> -->
			<view class="invitation-info">
			<view class="topics-text" v-if="item.visit_name">访客姓名：{{item.visit_name}}</view>
			<view class="topics-text">到访日期：{{retime(item.app_visittime)}}</view>
			<view class="topics-text">邀请部门：{{item.address?item.address:'-'}}</view>
			<view class="topics-text"><span class="inline-block vm">邀请原由：</span>
			<span class="w70 inline-block vm">
			<span class='onetext w80'>{{item.app_reson?item.app_reson:'暂无'}}</span>
			</span></view>
			<!-- <view class="topics-text"showm_status>访问信息:{{item.status==1?'已完成访问':(item.status==0?'未完成':(item.status==2?'已逾期':(item.status==4?'已暂停':'已完成访问')))}}</view> -->
			
			<view class="topics-text" >到访状态：{{item.m_tips}}</view>
			<!-- <view class="topics-text" >邀请状态:访客不接受</view> -->
			<view class="topics-text" v-if="item.m_status==5||item.m_status==9||item.m_status==12">不来理由：{{!item.meeting_reson ? item.m_tips:item.meeting_reson}}</view>
			<!-- <view class="topics-text" v-if="item.app_remark">备注：{{item.app_remark?item.app_remark:'-'}}</view> -->
			</view>
			<view class="topics-operation" v-if="item.m_status==11||item.m_status==10">
				<view class="topics-share"   @click="audshowadd(item)">同意</view>
				<view class="topics-detailsaud" @click="audshowpause(item)">不同意</view>
				<view class="topics-details"   @click="details(index)">详情</view>
			</view>
			<view class="topics-operation" v-else>
				<!-- <view class="topics-modify " v-if="item.status == 0&&item.meeting_status==0" @click="modify(index)">修改</view> -->
				<view class="topics-share"  v-if="item.meeting_status!=1&&item.status == 0||item.meeting_status!=1&&item.status == 4"  @click="openpause(item,index)">{{item.status == 4?'启用':'暂停'}}</view>
				<view class="topics-share"  v-if="item.status == 0&&item.meeting_status==0" :class="checkdetstatus(item,index)" @click="details(index,'shareYES')">分享</view>
				<view class="topics-details"   @click="details(index)">详情</view>
				<!-- <view class="topics-del" v-if="item.status == 0&&item.meeting_status==0" :class="checkdetstatus(item,index)" @click="del(item.id,item)">删除</view> -->
			</view>
			<!-- <view class="topics-foot m10"></view> -->
		</view>
		
		<view class="btnapprow bg_white">
			<view class="btn-row"><button type="primary" class="primary " @click="addyaoqing()">添加邀请</button></view>
		</view>
		<backnext nofooter='YES'></backnext>
		<w-picker
			v-if="date1visible == true"
			:visible.sync="date1visible"
			mode="date" 
			startYear="2020" 
			endYear="2030"
			value="showyearin"
			:current="true"
			fields="day"
			@confirm="onConfirm($event,'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date" 		
		></w-picker>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
	import {isToday} from "@/common/common.js" /*工具类*/
	import {appointmentgetlist,appointmentdelete,appointmentstate,appointmentaccept} from "@/common/api/appointment.js"
	import {usergetlist} from "@/common/api/user.js"
	import {timestampToTime} from "@/common/common.js"
	import {userinfo} from '@/common/api/user.js'; 
	import wPicker from '@/components/w-picker/w-picker.vue';
	
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				invitelist:[],
				page:1,
				userid:'',
				pageSize:10,
				statuon:'4',
				member_cfrequency:0,
				roleid:"",
				//statu状态(1-已不接受,2-已接受,3-已确认)
				datetype:'',
				date1visible:false,
				startdate:'',
				enddate:'',
				intype:'yq',
				showclick:true,
				yqyc:true,
			};
		},
		onReady() {
			this.date1visible=false;
		},
		onLoad() {
			/*请求培训题目列表*/
			this.date1visible=false;
			userinfo({}).then(res=>{
				console.log(res)
				if(res.data.member.member_cfrequency){
					this.member_cfrequency=res.data.member.member_cfrequency;				
				}
				
				if(res.data.member.roleid){
					this.roleid=res.data.member.roleid;				
				}
					
				})
			this.getinviteList();
		},
		methods:{
			audshowdel(item) {
			
				uni.navigateTo({
					url: '/pages/user/visitorauditDetails'+'?visitorinfo='+JSON.stringify(item)+'&type=yq'
				});
			},
			backRefresh(type){ //返回刷新带参数
				console.log(type)
				this.page=1;
				this.getinviteList();
			},
			
			/*检查操作状态*/
			checkdelstatus(item,index){
				if(item.status == 0){
					return true
				}
				if(item.visittime < Date.parse(new Date())/1000){
					return true
				}
			},
			choosetab(tab){
				this.enddate='';
				this.statuon=tab;
				this.page=1;
				this.getinviteList();
			},
			checkupstatus(item,index){
				let restatus = true
				if(item.status == 1 ){
					restatus =  true
				}
				if(item.visittime < Date.parse(new Date())/1000){
					restatus = false
				}
				return restatus
			},
			checkdetstatus(item,index){
				if(item.status == 0&&item.meeting_status==0){
					return 'yesdata'; 
				}else{
					return 'nodata'; 
				}
			},
			retime(val){
				return timestampToTime(val)
			},
			addyaoqing: function(e) {
				// uni.navigateTo({
				// 	url: './yaoqing'
				// });
				if(this.member_cfrequency>0){
					uni.navigateTo({
						url: './yaoqing'
					});
				}else{
					if(this.roleid==2){
						uni.showModal({
						    title: '积分不足，请问要去充值?',
						    // content: '这是一个模态弹窗',
						    success: function (res) {
						        if (res.confirm) {
									uni.navigateTo({
										url: '/pages/member/umemeber?type=2'
									});	
						            // console.log('用户点击确定');
						        } else if (res.cancel) {
									/*bann*/
									return 
						            // console.log('用户点击取消');
						        }
						    }
						});
					}else{
						uni.showToast({
							icon: 'none',
							title: '积分为0，请管理员充值后再操作'
						});
					}
					
					
				}
				
			},
			
			onNavigationBarButtonTap: function(e) {
				console.log(JSON.stringify(e));
				// uni.navigateTo({
				// 	url: './yaoqing'
				// });
				if(this.member_cfrequency>0){
					uni.navigateTo({
						url: './yaoqing'
					});
				}else{					
					if(this.roleid==2){
						uni.showModal({
						    title: '积分不足，请问要去充值?',
						    // content: '这是一个模态弹窗',
						    success: function (res) {
						        if (res.confirm) {
									uni.navigateTo({
										url: '/pages/member/umemeber?type=2'
									});	
						            // console.log('用户点击确定');
						        } else if (res.cancel) {
									/*bann*/
									return 
						            // console.log('用户点击取消');
						        }
						    }
						});
					}else{
						uni.showToast({
							icon: 'none',
							title: '积分为0，请管理员充值后再操作'
						});
					}
					
				}
			},
			
			getinviteList(){
				uni.getStorage({
					key: 'userid',
					success: res => {
						console.log(res.data);
						this.userid=res.data;
					}
				});
				
				var getdata ={
					'Uid':this.userid,
					'uid':this.userid,
					'page':this.page,
					'status':this.statuon,
					'pagesize':this.pageSize,
					'at_time':this.startdate,
					'end_time':this.enddate,
				}
				usergetlist(getdata).then(res=>{
					this.invitelist = res.data.data
					
				})
			},
			openpause(item){
				if(item.status==4){
					var text='启用';
					var state='0';
				}else{
					var text='暂停';					
					var state='4';
				}
				
				let  _that = this
				uni.showModal({
				    title: '确定'+text+'此邀请?',
				    success: function (res) {
				        if (res.confirm) {							
							appointmentstate({id:item.id,state:state}).then(res=>{
								if(res.data.code==200){
									uni.showToast({
									    title:res.data.message,
									    duration: 2000
									});
									 _that.page=1;
									 _that.getinviteList()
								}
							})
				            // console.log('用户点击确定');
				        } else if (res.cancel) {
							return 
				            // console.log('用户点击取消');
				        }
				    }
				});
			},
			details(index,type){
				/*提取invitelist 子项 传参*/	
				this.date1visible=false	
				console.log(index)
				uni.navigateTo({
					url: './xiangqing'+'?sharebtn=YES&listbtn=YES&detailDate='+JSON.stringify(this.invitelist[index])+'&sharetype='+type
				});
			},
			modify(index){
				uni.navigateTo({
					url: './invitationModification'+'?detailDate='+JSON.stringify(this.invitelist[index])
				});
			},
			del(id,item){
				console.log(item)
				
				/*请求*/
				let  _that = this
				uni.showModal({
				    title: '确定删除此邀请?',
				    success: function (res) {
				        if (res.confirm) {
							appointmentdelete({'id':id}).then(res=>{
								if(res.data.code==200){
									uni.showToast({
									    title: '成功删除',
									    duration: 2000
									});
									 _that.page=1;
									 _that.getinviteList()
								}
							})
				            // console.log('用户点击确定');
				        } else if (res.cancel) {
							return 
				            // console.log('用户点击取消');
				        }
				    }
				});

				
			},
			/*时间筛选开始*/
			chooseall(){
				this.enddate='';
				this.startdate='';
				
				this.page=1;
				this.getlist=[];
				this.getinviteList();
			},
			choosedate(type){
				this.datetype=type;
				this.date1visible=true;
			},
			onCancel(res,val){
			/*业务逻辑*/
			},
			onConfirm(res,val) {
				console.log(res)
				console.log(val);
				var datetype=this.datetype;
				//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
				switch (datetype) {
					case 'start':
						this.startdate = res.value
						break;
					case 'end':
						this.enddate = res.value
						break;
					
				}
				
				this.page=1;
				this.getinviteList();				
			},
			
			
			
			audshowadd(item){
				let that=this;
				
				uni.showLoading({  
					title: '正在进行相关操作...'  
				});
				uni.showModal({
					title: '',
					content: '同意邀请？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						
					
					var showtype='';
				
					if(that.showclick){
						that.showclick=false;
				appointmentaccept({id:item.id,appointmentid:item.id,type:showtype,auditing:'1',intype:that.intype}).then(res=>{
					that.showclick=true;
					uni.hideLoading(); 
					if(res.data.code==400){
						uni.showModal({
							title: '',
							content: res.data.message,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						return;
					}
						uni.showModal({
							title: '',
							content: res.data.message,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									// that.backrefresh('123');
									that.page=1;
									that.getinviteList()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					
				
					
				})
				}
				
						} else if (res.cancel) {
							uni.hideLoading(); 
							that.showclick=true;
							console.log('用户点击取消');
						}
					}
				});
			},		
			audshowpause(item){				
				uni.navigateTo({
					url: '/pages/yaoqing/invitationRefuse?id='+item.id+'&type=viss&intype='+this.intype,
				});
			},
			
			/*end */
		},
		filters: {
		  showstatus: function (value) {
		  
			// 状态(1-到达，2-保安放行，3-到达指定位置，4-完成-离开，5-保安不接受，6 离开部门)
			if(value=='1'){
				return '到达目的';
			}else if(value=='2'){
				return '保安放行';
			}else if(value=='3'){
				return '到达指定位置';
			}else if(value=='4'){
				return '完成-离开';
			}else if(value=='5'){
				return '保安不接受';
			}else if(value=='6'){
				return '离开部门';
			}else{
				return '等待访客接受';
			}
		  }
		},
		
		}
</script>

<style lang="scss" scoped>
	.alltab{border-bottom: 1px solid #EEEEEE;padding-bottom: 10upx;justify-content: space-around;width: 100%;}
	.alltab .tabli{
		// width: 33%;
		text-align: center;
	}
	.alltab .tabli text{padding-bottom: 10upx;}
	.alltab .tabli .on{border-bottom: 2px solid red;}
.train {
	width: 100%;
	.topics {
		margin: auto;
		// width: 100%;
		// margin-bottom: 10px;
		// border-radius: 8px;
		overflow: hidden;
		background: #fff;
	.topics-foot{
		border-bottom: 1px solid gray;
		opacity: 0.2;
	}
	.an-user-image{
		
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		
		
	}
	.an-user-image image{
		width: 100upx; 
		height: 100upx; 
		background-color: #eeeeee;
	}
	.an-user-image .myheaadurl{
		    position: relative;
		    // left: 35px;
		
	}
	.an-user-image .inviteheadurl{
			display: none;
		    position: absolute;
		    top: 0;
		    left: -35px;
		
	}
	}
	.topics-operation {
		
		justify-content: flex-end;
		// width: 60%;
		margin-left: auto;
		display: flex;
		margin-top:5px;
		uni-view {
			width: 68px;
			height: 30px;
			margin: 0 5px;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(212, 48, 48, 1);
			border-radius: 18px;
			font-size: 15px;
			line-height: 30px;
			text-align: center;
		}
		.topics-modify {
			background-color: rgba(230, 162, 60, 1);
		}
		.topics-share {
			background-color: rgba(0, 170, 0, 1.0);
		}
		.topics-detailsaud {
			background-color: rgba(212, 48, 48, 1);
		}
		
		.topics-details {
			background-color: rgba(42, 130, 228, 1);
		}
		.nodata {
			background-color: rgba(153, 153, 153, 1.0);
		}
	}
	.invitation-info{
		position:relative;
		left: 20%;
	}
	
	
}
.btnapprow{position: fixed;bottom: 90upx;left: 0px;width: 100%;}
.btnapprow .btn-row{background: #fff;width: 80%;margin: 0 auto;padding-bottom: 10px;padding-top: 10px;}
.primary{
	background: #007aff;
}
/*时间筛选*/
.an-index-grid {
		display: flex;
		flex-direction: row; //主轴方向
		flex-wrap: wrap; //换行
		justify-content: space-between; //主轴上的对齐方式
	}
	.an-index-grid2 {
			display: flex;
			flex-direction: row; //主轴方向
			flex-wrap: wrap; //换行
		}
.topnavfeer{position: absolute;z-index: 999;top: 0;}	
.topnavfeer .tablist{border-top: 0.5px solid #c8c7cc;border-bottom: 0.5px solid #c8c7cc;}
.topnavfeer .tabshow .on{border-bottom: 2px solid #ED6C19;}
</style>